<template>
  <component :is="type" class="common-fade-in">
    <slot/>
  </component>
</template>

<script lang="ts">
  import Vue from 'vue'
  import { Prop, Component } from 'vue-property-decorator'
  @Component

  export default class  CommonFadeIn extends Vue {
     @Prop({ type: String, default: 'div' }) type: string
  }

</script>

<style lang="scss">

  @include component(common-fade-in){

    transition-property: opacity, transform;
    transition-duration: 1s;
    opacity: 1;
    transform: translateY(0);

    @include option(fade-out){
      opacity: 0;
      transform: translateY(1rem);
    }

  }

</style>
